<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import anlyze from '../../apis/anlyze.js'

const chart = ref(null)

// 星级配置
const starConfig = [
  { name: '1星', color: '#FF6B6B', minDisplay: 0.1 }, // 即使0也显示微小扇形
  { name: '2星', color: '#FFA36B', minDisplay: 0.1 },
  { name: '3星', color: '#FFD166', minDisplay: 0.1 },
  { name: '4星', color: '#06D6A0', minDisplay: 0.1 },
  { name: '5星', color: '#118AB2', minDisplay: 0.1 }
]

const fetchStarRatingData = async () => {
  try {
    const res = await anlyze.getTaskRating()
    const ratingData = res || [0, 0, 0, 0, 0]

    const option = {
      title: {
        text: '任务星级分布',
        left: 'center',
        textStyle: {
          fontSize: 18,
          fontWeight: 'bold',
          color: '#333'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: params => {
          // 实际为0的数据显示"无"
          const value = params.value === 0 ? '无' : params.value + '次'
          return `${params.name}<br/>数量: ${value} (${params.percent}%)`
        }
      },
      legend: {
        orient: 'horizontal',
        bottom: 0,
        data: starConfig.map(item => item.name),
        itemHeight: 12,
        itemWidth: 12,
        itemGap: 20
      },
      series: [{
        name: '星级分布',
        type: 'pie',
        radius: ['35%', '65%'],
        center: ['50%', '45%'],
        avoidLabelOverlap: true,
        itemStyle: {
          borderRadius: 6,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: params => {
            // 值为0时不显示标签
            return params.value > 0 ? `${params.name}\n${params.value}次` : ''
          },
          fontSize: 12,
          lineHeight: 16,
          color: '#333'
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 10
        },
        data: starConfig.map((item, index) => ({
          name: item.name,
          value: Math.max(ratingData[index] || 0, item.minDisplay), // 确保最少显示minDisplay
          itemStyle: { color: item.color },
          // 实际为0的数据特殊样式
          emphasis: ratingData[index] === 0 ? {
            itemStyle: { opacity: 0.5 }
          } : {}
        }))
      }],
      graphic: [{
        // 当数据全为0时的提示
        type: 'text',
        invisible: ratingData.some(v => v > 0),
        left: 'center',
        top: '45%',
        style: {
          text: '暂无星级数据',
          fill: '#999',
          fontSize: 16
        }
      }]
    }

    const myChart = echarts.init(chart.value)
    myChart.setOption(option)

    const resizeHandler = () => myChart.resize()
    window.addEventListener('resize', resizeHandler)

    return () => window.removeEventListener('resize', resizeHandler)
  } catch (error) {
    console.error('获取星级数据失败:', error)
  }
}

onMounted(fetchStarRatingData)
</script>

<template>
  <div class="chart-container">
    <div ref="chart" class="chart-content"></div>
  </div>
</template>

<style scoped>
.chart-container {
  width: 100%;
  height: 500px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.chart-content {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .chart-container {
    height: 450px;
  }
}
</style>